<template>
  <el-dialog
    :title="title"
    :visible.sync="staffDialog"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @close="staffClose"
    :destroy-on-close="destroyOnClose"
    append-to-body
  >
    <div class="dialog-wrap">
      <!-- 公司架构 -->
      <div class="dialog-list">
        <el-tree
          :data="dialogList1"
          :props="defaultProps"
          accordion
          @node-click="queryUserMsg"
        >
        </el-tree>
      </div>
      <!-- 选择人员 -->
      <div class="dialog-list">
        <el-input
          v-model="staffName"
          placeholder="请输入姓名"
          clearable
          suffix-icon="el-icon-search"
          @blur="searchStaff"
        ></el-input>
        <el-checkbox-group v-model="staffList" @change="selectStaff">
          <el-checkbox
            v-for="item in dialogList2"
            :key="item.userId"
            :label="item.userName"
            :value="item.userId"
            :disabled="item.disabled"
            style="width: 100%; margin-top: 15px"
          ></el-checkbox>
        </el-checkbox-group>
      </div>
      <!-- 选中人员 -->
      <div class="dialog-list">
        <div>
          已选成员<span style="color: red">{{ dialogList3.length }}</span
        >人
        </div>
        <el-tag
          size="medium"
          closable
          v-for="(item, index) in dialogList3"
          :key="item"
          style="margin-top: 15px"
          type="info"
          @close="handleCloseDialog(index)"
        >{{ item }}</el-tag
        >
      </div>
    </div>
    <el-button type="primary" class="dialog-btn" @click="staffConfirm"
    >确定</el-button
    >
  </el-dialog>
</template>

<script>
import {
  queryDeptMsg,
  queryUserMsg,
} from "@/api/communityOperating/personalSop";
// import { getTree, getList } from '@/api/organization'
export default {
  props: {
    title: {
      type: String,
      default: "新增员工",
    },
    //是否筛选未激活账号
    isActive: {
      type: String,
      default: "",
    },
    // 添加标签显隐
    visible: {
      type: Boolean,
      default: false,
    },
    isDisabled: {
      type: Boolean,
      default: false,
    },
    destroyOnClose: {
      type: Boolean,
      default: true,
    },
    selectList: {
      type: Array,
      default: [],
    },
    userList: {
      type: Array,
      default: [],
    },
  },
  computed: {
    staffDialog: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("update:visible", val);
      },
    },
  },
  watch: {
    staffDialog: {
      handler(val) {
        if (val) {
          this.staffList = this.selectList;
          this.dialogList3 = this.selectList;
        }
      },
    },
  },

  data() {
    return {
      dialogList1: [], // 公司架构
      defaultProps: {
        children: "children",
        label: "label",
      },
      staffName: "", // 搜索名字
      staffList: [], // 第二列勾选内容
      dialogList2: [], // 选择人员
      dialogList3: [], // 已经勾选的人员
      scrmPersonSopUserRels: [], // 执行员工
      allId: [],
      allDialogList: [], // 存放所有的员工，点弹窗确认需要遍历
    };
  },
  methods: {
    // 弹窗的关闭
    staffClose() {
      this.staffDialog = false;
    },
    // 查询添加员工的信息
    handleQueryDeptMsg() {
      this.dialogList1 = [];
      queryDeptMsg().then((res) => {
        if (res.code === 200 && res.data.length) {
          res.data.forEach((item) => {
            this.dialogList1.push({
              id: item.deptId,
              label: item.deptName,
              children: null,
            });
          });
        }
      });
    },
    // 弹窗的确认
    staffConfirm() {
      this.staffDialog = false;
      this.scrmPersonSopUserRels = [];
      this.dialogList3.forEach((e) => {
        this.allDialogList.forEach((item) => {
          if (item.userName === e) {
            this.scrmPersonSopUserRels.push({
              userName: e,
              userId: item.userId,
              taskId: this.taskId,
            });
          }
        });
      });
      this.$emit("confirm", this.scrmPersonSopUserRels);
    },
    // 公司架构
    queryUserMsg(data) {
      console.log(this.$props.isActive  , '查看一下是否拿到这个值')
      this.deptIdObj = data;
      this.dialogList2 = [];
      let flag = false;
      queryUserMsg({ deptId: data.id , isActive: this.$props.isActive }).then((res) => {
        if (res.code === 200 && res.data.length) {
          if(this.isDisabled){
            res.data.forEach(item=>{
              item.disabled=this.userList.some(item1=>{
                return  item1.name===item.userName
              })
            })
          }
          console.log( res.data,'===== res.data');
          this.dialogList2 = res.data;
          if (res.data.length) {
            this.allId.includes(data.id) ? (flag = false) : (flag = true);
            if (flag) {
              this.allId.push(data.id);
              res.data.forEach((item) => {
                this.allDialogList.push(item);
              });
            }
          }
        }
      });
    },
    // 过滤选择人员列表
    searchStaff(e) {
      console.log(e , '这个拿到的值')
      if (!e) {
        this.dialogList2 = [];
        this.queryUserMsg(this.deptIdObj);
      } else {
        this.dialogList2 = this.allDialogList.filter((item) => {
          return item.userName.indexOf(this.staffName) >= 0;
        });
      }
    },
    // 添加员工-打开弹窗
    openStaff() {
      this.handleQueryDeptMsg();
      if (this.scrmPersonSopUserRels.length) {
        this.scrmPersonSopUserRels.forEach((item) => {
          this.dialogList3.push(item.userName);
        });
      }
      // this.staffList = this.dialogList3;
      this.staffList = this.staffList.concat(this.dialogList3);
    },
    handleCloseDialog(index) {
      this.dialogList3.splice(index, 1);
      this.staffList = this.staffList.concat(this.dialogList3);
    },
    // 勾选人员列表
    selectStaff(e) {
      this.dialogList3 = e;
    },
  },
  mounted() {
    this.openStaff();
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/base.scss";

.dialog-wrap {
  display: flex;
  justify-content: flex-start;

  .dialog-list {
    width: 33%;
    padding: 0 15px;
    box-sizing: border-box;
    max-height: 500px;
    overflow: auto;

    &:nth-child(2) {
      flex: 1;
      border-left: $normalBorder;
      border-right: $normalBorder;
    }
  }

  .block-wrap {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    font-weight: 600;
    color: #2a2a2a;
    font-size: 12px;
    font-family: PingFangSC-Medium, PingFang SC;

    .block-item {
      width: 80px;
      padding: 5px 0;
      margin: 10px;
      border: $normalBorder;
      text-align: center;

      .svg-icon {
        width: 4em;
        height: 3em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
      }
    }
  }

  .upload-list {
    display: flex;
    justify-content: space-between;
    border: $normalBorder;
    padding: 0 10px;
  }
}
</style>
